import React, {Component} from 'react'
import {Affix, Button, Col, Row} from 'antd'
import isMobile from '../../constant/client-util'
import twLogo from '../../images/thoughtworks-logo-white.png'
import mobileNav from '../../images/mobile-nav.png'
import RegisterStepModal from './register/register-step-modal'

class Header extends Component {
  state = {
    openMenu: false,
    isRegisterModalOpen: false,
    deviceWidth: document.documentElement.clientWidth
  }

  componentDidMount = () => {
    window.addEventListener('resize', this._updateDimensions)
  }
  componentWillUnmount = () => {
    window.removeEventListener("resize", this._updateDimensions);
  }

  _updateDimensions = () => {
    this.setState({
      deviceWidth: document.documentElement.clientWidth,
    });
  }
  onClickMenu = () => {
    this.setState({
      openMenu: !this.state.openMenu
    })
  }
  isGreaterMDWidth = () => {
    return (this.state.deviceWidth - 992) / 2 > 155
  }

  getSubMenus = (menus = []) => {
    menus.push({url: '#top', content: '首页', klassName: 'tws-4th-btn-index'},
      {url: '#about', content: '关于 ThoughtWorks', klassName: 'tws-4th-btn-aboutThoughtworks'})
    return menus.map(menu => {
      return <a href={menu.url}>
        <Button size='large'
                style={{
                  border: 0,
                  borderRadius: '0',
                  width: '100%'
                }}
                className={'mobile-header-select ' + menu.klassName}
                onClick={this.onClickMenu}>
          {menu.content}
        </Button>
      </a>
    })
  }

  render() {
    const currentWidth = () => (this.state.deviceWidth - 992) / 2
    return <div id='top'>
      <Affix offsetTop={0}>
        {
          isMobile()
            ? <div>
              <Row style={{background: 'rgb(69,69,69)', height: '1.40rem'}} type='flex' justify='center'
                   align='middle'>

                <Col xs={{span: 4, offset: 2}}>
                  <img src={twLogo} alt='' width={130}/>
                </Col>

                <Col xs={{span: 4, offset: 14}}>
                  <img src={mobileNav} alt="" width={40} onClick={this.onClickMenu}/>
                </Col>
              </Row>
              {
                this.state.openMenu ?
                  <Row>
                    <Col span={11} offset={13}
                         style={{
                           position: 'absolute',
                           zIndex: '1',
                           backgroundColor: 'rgb(41,40,44)',
                           opacity: 0.9
                         }}>
                      {this.getSubMenus()}
                    </Col>
                  </Row> : ''
              }
            </div>
            : <Row style={{background: 'rgb(69,69,69)', height: '.80rem'}} type='flex' justify='end'
                   align='middle'>
              <div className='PC_box' style={{
                marginRight: currentWidth()
              }}>
                <Col span={24} style={{height: '100%'}}>
                  <Row style={{background: 'rgb(69,69,69)', height: '.80rem'}} type='flex' justify='space-between'
                       align='middle'>
                    <Col span={14}>
                      <img src={twLogo} alt='' width={130}/>
                      <span style={{
                        marginLeft: 10,
                        color: 'white',
                        display: 'inline-block',
                        lineHeightA: '10px'
                      }}> 编程体验之旅第四季 </span>
                    </Col>
                    {
                      this.isGreaterMDWidth() ?
                        <Col span={2} style={{textAlign: 'center', height: '100%'}}>
                          <a href='#top'>
                            <Button size='large'
                                    style={{
                                      border: 0,
                                      borderRadius: '0',
                                      height: '100%',
                                      width: '100%',
                                      wordBreak: 'break-all'
                                    }}
                                    className='header-select tws-4th-btn-index'
                            >
                              <span style={{color: 'white'}}>首页</span>
                            </Button>
                          </a>
                        </Col>
                        : ''
                    }
                    {
                      this.isGreaterMDWidth() ?
                        <Col span={5} style={{textAlign: 'center', height: '100%'}}>
                          <a href='#about'>
                            <Button size='large'
                                    style={{
                                      border: 0,
                                      borderRadius: '0',
                                      margin: 0,
                                      width: '100%',
                                      height: '100%',
                                    }}
                                    className='header-select tws-4th-btn-aboutThoughtworks'
                            >
                              <span style={{color: 'white'}}>关于ThoughtWorks</span></Button>
                          </a>
                        </Col>
                        : ''
                    }
                    <Col span={this.isGreaterMDWidth() ? 3 : 5}
                         style={{color: 'white', textAlign: 'center', height: '100%', margin: '0'}}>
                      <Button type='primary' size='large'
                              className='tws-4th-btn-signUp'
                              onClick={() => this.setState({isRegisterModalOpen: true})}
                              style={{
                                borderRadius: '0',
                                height: '100%',
                                width: this.isGreaterMDWidth() ? '100%' : '70%',
                                padding: '0 20px'
                              }}
                      ><span>我要报名</span></Button>
                      {
                        !this.isGreaterMDWidth() ?
                          <img src={mobileNav} alt="" width={40} onClick={this.onClickMenu}
                               style={{marginLeft: '.1rem'}}/>
                          : ''}
                    </Col>
                  </Row>
                  {
                    this.state.openMenu ?
                      <Row>
                        <Col span={5} offset={19}
                             style={{
                               position: 'absolute',
                               zIndex: '1',
                               backgroundColor: 'rgb(41,40,44)',
                               opacity: 0.9
                             }}>
                          {this.getSubMenus(
                            [{
                              url: 'https://school.thoughtworks.cn/learn/auth/login',
                              klassName: '',
                              content: '已报名？开始答题'
                            }]
                          )}
                        </Col>
                      </Row> : ''
                  }
                  <RegisterStepModal
                    isRegisterModalOpen={this.state.isRegisterModalOpen}
                    closeModal={(callback) => this.setState({isRegisterModalOpen: false}, () => callback())}/>
                </Col>
              </div>
              {
                this.isGreaterMDWidth() ?
                  <a className='header-link'
                     href="https://school.thoughtworks.cn/learn/auth/login">已报名？开始答题</a>
                  : ''}
            </Row>
        }
      </Affix>
    </div>

  }

}

export default Header



